<template>
  <div class="pcUserList pd-20">
    <el-input v-model="phone"
              @keyup.enter.native="searchMethod"
              placeholder="请输入电话号码"
              clearable
              @clear="searchMethod"
              class="w-200" />
    <el-button type="primary"
               @click="searchMethod">查 询</el-button>
    <el-table v-loading="loading"
              element-loading-text="执行中..."
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.5)"
              ref="multipleTable"
              :data="dataList"
              height="780"
              border
              class="mt-20"
              style="width: 100%">
      <el-table-column align="center"
                       type="index"
                       label="序号"
                       min-width="20">
      </el-table-column>
      <el-table-column prop="name"
                       align="center"
                       label="名称"
                       min-width="30">
      </el-table-column>
      <el-table-column prop="phone"
                       align="center"
                       label="电话"
                       min-width="80">
      </el-table-column>
      <el-table-column prop="email"
                       align="center"
                       label="邮箱"
                       min-width="100">
      </el-table-column>
      <el-table-column align="center"
                       label="LOGO"
                       min-width="100">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px"
                    :src="scope.row.infoList.logoImg[0]"
                    :preview-src-list="scope.row.infoList.logoImg">
          </el-image>

        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="授权书"
                       min-width="100">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px"
                    :src="scope.row.infoList.authorize[0]"
                    :preview-src-list="scope.row.infoList.authorize">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="营业执照"
                       min-width="100">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px"
                    :src="scope.row.infoList.license[0]"
                    :preview-src-list="scope.row.infoList.license">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="position"
                       align="center"
                       label="职位"
                       min-width="50">
      </el-table-column>
      <el-table-column prop="orgName"
                       align="center"
                       label="机构名称"
                       min-width="120">
      </el-table-column>
      <el-table-column prop="address"
                       align="center"
                       label="机构地址"
                       min-width="120">
      </el-table-column>
      <el-table-column align="center"
                       label="状态"
                       min-width="50"
                       :formatter="formatterStatus">
      </el-table-column>
      <el-table-column align="center"
                       label="操作员"
                       min-width="50">
        <template slot-scope="scope">
          <span v-if="scope.row.adminDto != null">{{scope.row.adminDto.userName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="用户"
                       min-width="50">
        <template slot-scope="scope">
          <span v-if="scope.row.pcUserDto != null">{{scope.row.pcUserDto.userName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="创建时间"
                       min-width="100"
                       :formatter="formatterDate">
      </el-table-column>
      <el-table-column min-width="120"
                       align="center"
                       label="操作">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0">
            <el-button size="mini"
                       type="primary"
                       @click="changeStatus(scope.row, 1)">通 过</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="changeStatus(scope.row, -1)">驳 回</el-button>
          </span>
          <el-tag type="primary"
                  v-if="scope.row.status === 1">已通过</el-tag>
          <el-tag type="primary"
                  v-if="scope.row.status === -1">已驳回</el-tag>
        </template>
      </el-table-column>
      <infinite-loading slot="append"
                        @infinite="initTableData"
                        :identifier="infiniteId"
                        force-use-infinite-wrapper=".el-table__body-wrapper">
      </infinite-loading>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "pcUserList",
    data () {
      return {
        loading: false,
        phone: '',
        pageIndex: 0,
        pageSize: 10,
        dataList: [],
        infiniteId: 0,
        state: '',
      }
    },
    methods: {
      initTableData ($state) {
        this.state = $state;
        let param = {
          phone: this.phone,
          pageSize: this.pageSize,
          pageIndex: this.pageIndex
        };
        this.post(this.api.pcUserList.url, param).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.dataList = this.dataList.concat(res.data.object);
              this.pageIndex += 1;
              $state.loaded();
            } else {
              $state.complete();
            }
          }
          else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      changeStatus (row, status) {
        this.loading = true;
        let message;
        if (status === 1) {
          message = "操作成功,已向相应邮箱发送相关邮件!"
        } else {
          message = "操作成功!"
        }
        let param = {
          id: row.id,
          orgName: row.orgName,
          status: status,
          phone: row.phone,
          name: row.name,
          email: row.email,
          provinceId: row.provinceId,
          cityId: row.cityId,
          districtId: row.districtId,
          address: row.address,
          imageUrl: row.infoList.logoImg[0]
        };
        this.post(this.api.modifyStatus.url, param).then((res) => {
          if (res.data.code === '200') {
            this.loading = false;
            this.$message({
              showClose: true,
              message: message,
              type: 'success'
            });
            this.searchMethod()
          } else {
            this.loading = false;
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
            this.searchMethod()
          }
        });
      },
      searchMethod () {
        if (this.phone === '') {
          this.pageIndex = 0;
          this.dataList = [];
          this.infiniteId += 1;
        } else {
          this.pageIndex = 0;
          this.dataList = [];
          this.initTableData(this.state)
        }
      },
      formatterStatus (row) {
        if (row.status === -1) {
          return "已驳回"
        }
        if (row.status === 0) {
          return "已提交"
        }
        if (row.status === 1) {
          return "已通过"
        }
      },
      formatterDate (row) {
        return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm')
      }
    }
  }
</script>

<style>
</style>
